<template>
	<view id="rebate-appeal">
		<view class="reason">
			<view class="uni-title">申诉原因：</view>
			<view class="uni-textarea" v-if="status == 1">
				<textarea maxlength="2000" v-model="appealForm.appealReason" auto-height />
			</view>
			<view v-else>
				{{appealResult.appeal_reason}}
			</view>
		</view>
		<view v-if="status == 2">
			<view class="uni-title">申诉结果：</view>
			<view class="img-box" v-if="appealResult.appeal_img">
				<image class="img" :src="appealResult.appeal_img" mode=""></image>
			</view>
		</view>
		<button v-if="status == 1" :loading="loading" :disabled="disabled" class="submit-btn" @click="completeAppeal">提交申诉</button>
	</view>
</template>

<script>
	import {
		apiMerchantRebateAppealDetail,
		apiMerchantRebateAppeal
	} from '../../../http/apis.js'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['token'])
		},
		data(){
			return {
				appealForm:{
					token: '',
					merchantRebateId: '',
					appealReason: ''
				},
				appealResult: {},
				status: '',
				loading: false
			}
		},
		onShow() {
			
		},
		onLoad(option) {
			this.appealForm.merchantRebateId = option.id
			this.appealForm.token = this.token
			this.status = option.status
			if(this.status==2){
				apiMerchantRebateAppealDetail({
					token: this.token,
					merchantRebateId: this.appealForm.merchantRebateId
				}).then(res =>{
				    if(res.data.code == 1)  {
						this.appealResult = res.data.msg
					}         
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			}
		},
		methods:{
			completeAppeal(){
				if(!this.appealForm.appealReason){
					uni.showToast({title:'请填写申诉原因',duration: 1000,icon:'none'})
					return
				}
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				this.loading = true
				apiMerchantRebateAppeal(this.appealForm).then(res =>{
					uni.hideLoading()
				    if(res.data.code == 1)  {
						this.$msg.showToast(res.data.msg)
						setTimeout(()=>{
							this.loading = false
							uni.switchTab({
								url: './taskList'
							});
						},1000)
					}  else {
						this.loading = false
						this.$msg.showToast(res.data.msg)
					}     
				}).catch(res => {
					uni.hideLoading()
					this.$msg.showToast(res.data.msg)
				})
				uni.request({
					url: this.GLOBAL.BASE_URL+'baseapi/push/merchantRebateAppeal',
					method: 'POST',
					data: this.appealForm,
					success: res => {
						uni.hideLoading()
						if(res.data.code == 1){
							uni.showToast({title:res.data.msg,duration: 1000,icon:'none'})
							setTimeout(()=>{
								uni.switchTab({
									url: '/pages/received/received'
								});
							},1000)
							
						} else{
							uni.showToast({title:res.data.msg,duration: 1000,icon:'none'})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
		padding: 0 20upx;
	}
	#rebate-appeal{
		.reason {
			margin-top: 20upx;
		}
		.uni-title {
			font-size: 28upx;
			margin-bottom: 10upx;
		}
		.uni-textarea {
			border: 1px solid #E0E0E0;
			border-radius: 5upx;
			padding: 20upx;
			uni-textarea {
				font-size: 28upx!important;
			}
			
		}
		.img-box {
			margin-top: 20upx;
			.img{
				width: 500upx;
				height: 700upx;
			}
		}
		.submit-btn {
			position: fixed;
			bottom: 32upx;
			left: 32upx;
			right: 32upx;
			font-size: 18px;
			color: #fff;
			text-align: center;
			line-height: 50px;
			background: $theme-background-color;
		}
	}
</style>

